import { Button, Input, Space, message } from "antd";
import style from "./login.module.scss";
import { ChangeEvent, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Login } from "@/api";
const View = () => {
  const navigate = useNavigate();
  const [userName, setUserName] = useState("");
  const [passWord, setPassWord] = useState("");
  const getUserNameHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setUserName(e.target.value);
  };
  const getPassWordHandler = (e: ChangeEvent<HTMLInputElement>) => {
    setPassWord(e.target.value);
  };
  const formSubmitHandler = async () => {
    // 获取表单项中的数据日期、内容、时长
    // 将数据拼装为一个对象
    if (!userName.trim() || !passWord.trim()) {
        message.warning("用户信息不完整")
      return;
    }
    const newLog = {
      userName: userName,
      password: passWord,
    };
    let result = await Login({
      userName: newLog.userName,
      password: newLog.password,
    });
    if (result.code === 200) {
      console.log(result);
      message.success(result.msg);
      localStorage.setItem("token", result.data.token);
      navigate("/page1");
    }
    
    // 清空表单项
    setUserName("");
    setPassWord("");
    console.log(newLog);
  };
  return (
    <div className={style.loginPage}>
      <div className={style.loginBox}>
        <Space
          direction="vertical"
          size="large"
          style={{ display: "flex", marginTop: "60px" }}
        >
          <Input
            placeholder="用户名"
            value={userName}
            onChange={getUserNameHandler}
          />
          <Input.Password
            placeholder="密码"
            value={passWord}
            onChange={getPassWordHandler}
          />
          <Button type="primary" block onClick={formSubmitHandler}>
            登录
          </Button>
        </Space>
      </div>
    </div>
  );
};

export default View;
